<template>
  <div class="radar-box">
    <div id="radarChart1"></div>
    <div id="radarChart2"></div>
    <div id="radarChart3"></div>
    <div id="radarChart4"></div>
    <div id="radarChart5"></div>
    <div id="radarChart6"></div>
    <div class="radar-info">
      <p>
        <span>全国企业总数：{{data.allCompanies}}</span>
        <span>苏州企业总数：{{data.cityCompanies}}</span>
      </p>
      <p>
        <span>全国机构总数：{{data.allInstitutions}}</span>
        <span>苏州机构总数：{{data.cityInstitutions}}</span>
      </p>
      <p>
        <span>全国人才总数：{{data.allTalents}}</span>
        <span>苏州人才总数：{{data.cityTalents}}</span>
      </p>
      <p>
        <span>全国专利总数：{{data.allPatents}}</span>
        <span>苏州专利总数：{{data.cityPatents}}</span>
      </p>
      <p>
        <span>全国上市企业总数：{{data.allListedEnterprises}}</span>
        <span>苏州上市企业总数：{{data.cityListedEnterprises}}</span>
      </p>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import resize from '@/utils/resize'
export default {
  mixins: [resize],
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      chart1: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
    }
  },
  computed:{
    ...mapState(['levelName','levelCode']),
  },
  methods: {
    init() {
      this.chart1 = this.$echarts.init(document.getElementById('radarChart1'))
      this.chart2 = this.$echarts.init(document.getElementById('radarChart2'))
      this.chart3 = this.$echarts.init(document.getElementById('radarChart3'))
      this.chart4 = this.$echarts.init(document.getElementById('radarChart4'))
      this.chart5 = this.$echarts.init(document.getElementById('radarChart5'))
      this.chart6 = this.$echarts.init(document.getElementById('radarChart6'))

      let countryArr = [this.data.allListedEnterprises, this.data.allCompanies, this.data.allInstitutions, this.data.allTalents, this.data.allPatents]
      let cityArr = [this.data.cityListedEnterprises, this.data.cityCompanies, this.data.cityInstitutions, this.data.cityTalents, this.data.cityPatents]
      let prop = []
      cityArr.forEach((v, i) => {
        prop.push(v / countryArr[i] * 100)
      })

      // 值太小的话进行等比例放大， 40%
      let max = Math.max(...prop)
      let scale = Math.floor(40 / max)

      let option1 = {
        tooltip: {
          show: true,
          trigger: 'axis',
          formatter: (params) => {
          }
        },
        radar: {
          splitNumber: 5,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          indicator: [
            {name: '上市企业', max: this.data.allListedEnterprises, color: '#86899e'},
            {name: '企业', max: this.data.allCompanies, color: '#86899e'},
            {name: '机构', max: this.data.allInstitutions, color: '#86899e'},
            {name: '人才', max: this.data.allTalents, color: '#86899e'},
            {name: '专利', max: this.data.allPatents, color: '#86899e'},
          ]
        },
        series: [
          {
            type: 'radar',
            symbolSize: 0,
            // zlevel: 10,
            lineStyle: {
              color: 'transparent'
            },
            data: [
              {
                name: '全国',
                value: [this.data.allListedEnterprises, this.data.allCompanies, this.data.allInstitutions, this.data.allTalents,
                  this.data.allPatents],
                areaStyle: {
                  // color: '#504da5',
                  color: '#74cec1',
                  opacity: .38
                },
              }, {
                name: this.levelName,
                value: [this.data.cityListedEnterprises * scale, 
                  this.data.cityCompanies * scale, 
                  this.data.cityInstitutions * scale, 
                  this.data.cityTalents * scale, 
                  this.data.cityPatents * scale],
                areaStyle: {
                  // color: '#74cec1',
                  color: '#504da5',
                  opacity: .38
                },
              }
            ]
          }
        ]
      }

      let option2 = {
        ...option1,
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
          }
        },
        radar: {
          name: {
            show: false
          },
          axisLine: {
            show: false
          },
          startAngle: 90,
          // zlevel: 12,
          indicator: [
            {name: '上市企业', max: this.data.allListedEnterprises},
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            symbolSize: 14,
            itemStyle: {
              color: '#cdc5f7'
            },
            data: [
              {
                name: '全国',
                value: [this.data.allListedEnterprises],
              }
            ]
          }
        ]
      }

      let option3 = {
        ...option1,
        radar: {
          name: {
            show: false
          },
          axisLine: {
            show: false
          },
          startAngle: 162,
          indicator: [
            {name: '企业', max: this.data.allCompanies},
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            symbolSize: 14,
            itemStyle: {
              color: '#405bda'
            },
            data: [
              {
                name: '全国',
                value: [this.data.allCompanies],
              }
            ]
          }
        ]
      }

      let option4 = {
        ...option1,
        radar: {
          name: {
            show: false
          },
          axisLine: {
            show: false
          },
          startAngle: 234,
          indicator: [
            {name: '机构', max: this.data.allInstitutions},
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            symbolSize: 14,
            itemStyle: {
              color: '#4587cb'
            },
            data: [
              {
                name: '全国',
                value: [this.data.allInstitutions],
              }
            ]
          }
        ]
      }

      let option5 = {
        ...option1,
        radar: {
          name: {
            show: false
          },
          axisLine: {
            show: false
          },
          startAngle: 306,
          indicator: [
            {name: '人才', max: this.data.allTalents},
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            symbolSize: 14,
            itemStyle: {
              color: '#6485fd'
            },
            data: [
              {
                name: '全国',
                value: [this.data.allTalents],
              }
            ]
          }
        ]
      }

      let option6 = {
        ...option1,
        radar: {
          name: {
            show: false
          },
          axisLine: {
            show: false
          },
          startAngle: 378,
          indicator: [
            {name: '专利', max: this.data.allPatents},
          ]
        },
        series: [
          {
            type: 'radar',
            symbol: 'circle',
            symbolSize: 14,
            itemStyle: {
              color: '#f0916e'
            },
            data: [
              {
                name: '全国',
                value: [this.data.allPatents],
              }
            ]
          }
        ]
      }
      // {
        // tooltip: {
        //   trigger: 'axis'
        // },
        // radar: {
        //   name: {
        //     show: false
        //   },
        //   splitNumber: 5,
        //   axisLine: {
        //     show: false
        //   },
        //   axisTick: {
        //     show: false
        //   },
        //   splitArea: {
        //     show: false
        //   },
        //   indicator: [
        //     {name: '上市企业', max: this.data.allListedEnterprises},
        //     // {name: '上市企业', max: this.data.allListedEnterprises, color: '#cdc5f7'},
        //     // {name: '企业', max: this.data.allCompanies, color: '#405bda'},
        //     // {name: '机构', max: this.data.allInstitutions, color: '#4587cb'},
        //     // {name: '人才', max: this.data.allTalents, color: '#6485fd'},
        //     // {name: '专利', max: this.data.allPatents, color: '#f0916e'},
        //   ]
        // },
      //   series: [
      //     {
      //       type: 'radar',
      //       symbol: 'circle',
      //       symbolSize: 14,
      //       itemStyle: {
      //         color: '#cdc5f7'
      //       },
      //       data: [
      //         {
      //           name: '全国',
      //           value: [this.data.allListedEnterprises],
      //           areaStyle: {
      //             color: '#504da5',
      //             opacity: .38
      //           },
      //         }
      //       ]
      //     }
      //   ]
      // }

      this.chart1.setOption(option1)
      this.chart2.setOption(option2)
      this.chart3.setOption(option3)
      this.chart4.setOption(option4)
      this.chart5.setOption(option5)
      this.chart6.setOption(option6)
    }
  },
  watch: {
    data() {
      this.init()
    }
  },
  mounted() {
    if (this.data) {
      this.init()
    }
  },
  beforeDestroy() {
    if (this.chart1) {
      this.chart1.dispose()
    }
    if (this.chart2) {
      this.chart2.dispose()
    }
    if (this.chart3) {
      this.chart3.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
#radarChart1, #radarChart2, #radarChart3, #radarChart4, #radarChart5, #radarChart6 {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 20px);
  height: 300px;
}
.radar-info {
  position: relative;
  max-width: 400px;
  padding: 0 10px 0 20px;
  margin: 300px auto 0;
  p {
    position: relative;
    display: flex;
    width: 100%;
    line-height: 30px;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 12px;
    color: #86899e;
    &:before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 10px;
      height: 10px;
      margin-top: -5px;
      border-radius: 50%;
      content: ''
    }
    &:nth-of-type(1) {
      &:before {
        background-color: #405bda;
      }
    }
    &:nth-of-type(2) {
      &:before {
        background-color: #4587cb;
      }
    }
    &:nth-of-type(3) {
      &:before {
        background-color: #6485fd;
      }
    }
    &:nth-of-type(4) {
      &:before {
        background-color: #f0916e;
      }
    }
    &:nth-of-type(5) {
      &:before {
        background-color: #cdc5f7;
      }
    }
    span {
      flex: 1;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>